<!-- 首页，支持店铺装修 -->
<template>
  <view v-if="template">
    <s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page">
      <view class="background-image-container">
        <view v-for="(area, index) in clickableAreas" :key="index" class="clickable-area" :style="{
          backgroundColor: area.color,
          width: area.width + 'px',
          height: area.height + 'px',
          left: area.left + 'px',
          top: area.top + 'px'
        }" @click="handleAreaClick(index)">
        </view>
      </view>
      <logo-bottom />
    </s-layout>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad, onPageScroll, onPullDownRefresh } from "@dcloudio/uni-app";
import LogoBottom from "../components/logo/logo-bottom.vue";
import sheep from "@/sheep";
import $share from "@/sheep/platform/share";
const clickableAreas = ref([]);

// 获取屏幕宽度并设置点击区域
uni.getSystemInfo({
  success: (res) => {
    const screenWidth = res.windowWidth;
    const screenHeight = res.windowHeight;
    const halfWidth = screenWidth / 2 - 20;
    
    clickableAreas.value = [
      { color: '#00000000', width: halfWidth, height: screenHeight / 3 - 40, left: 10, top: screenHeight / 4 },  // 红色
      { color: '#00000000', width: halfWidth, height: screenHeight / 2 + 10, left: halfWidth + 30, top: 40 },   // 绿色
      { color: '#00000000', width: halfWidth, height: screenHeight / 3, left: 10, top: 490 },  // 蓝色
      { color: '#00000000', width: halfWidth, height: screenHeight / 3 - 30, left: halfWidth + 30, top: screenHeight / 2 + 70 }  // 黄色
    ];
  }
});
const handleAreaClick = (index) => {
  console.log(`点击了区域 ${index + 1}`);
  // 可以根据不同区域执行不同的操作
  switch(index) {
    case 0:
      // 跳转到盲盒购买页面
      uni.navigateTo({
        url: '/pages/activity/blindbox/index'
      });
      break;
    case 1:
      console.log('绿色区域被点击');
      break;
    case 2:
      console.log('蓝色区域被点击');
      break;
    case 3:
      console.log('黄色区域被点击');
      break;
    default:
      console.log('未知区域被点击');
  }
};

// 隐藏原生tabBar
uni.hideTabBar({
  fail: () => { },
});

const template = computed(() => sheep.$store("app").template?.home);

onLoad((options) => {
  // #ifdef MP
  // 小程序识别二维码
  if (options.scene) {
    const sceneParams = decodeURIComponent(options.scene).split("=");
    console.log("sceneParams=>", sceneParams);
    options[sceneParams[0]] = sceneParams[1];
  }
  // #endif

  // 预览模板
  if (options.templateId) {
    sheep.$store("app").init(options.templateId);
  }

  // 解析分享信息
  if (options.spm) {
    $share.decryptSpm(options.spm);
  }

  // 进入指定页面(完整页面路径)
  if (options.page) {
    sheep.$router.go(decodeURIComponent(options.page));
  }
});

// 下拉刷新
onPullDownRefresh(() => {
  sheep.$store("app").init();
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 800);
});

onPageScroll(() => { });
</script>

<style scoped>
.background-image-container {
  width: 100%;
  height: calc(100vh - 50px - 5vh);
  background-image: url('http://49.233.144.92:7791/i/2025/10/26/68fe35d49153b.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.clickable-area {
  position: absolute;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clickable-area:hover {
  transform: scale(1.05);
  opacity: 0.8;
}
</style>